<template>
	<div class="w-page w-index">
		<!-- 头部 -->
		<Header navNum="1" @isSearch='isSearch'></Header>
		<!-- 内容 -->
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<div class="w-bannerbox flex">
					<div class="w-banner">
						<div class="bannerWrap">
							<div class="swiper-container banner_swiper">
								<div class="swiper-wrapper">
									<div class="swiper-slide" v-for="(v,i) in bannerList" :key="i">
										<div class="w-img" :style="{backgroundImage:'url('+v+')'}"></div>
									</div>
								</div>
								<div class="swiper-pagination swiper-pagination-white" id="swiper-spit"></div>
							</div>
						</div>
					</div>
<!--					<div class="w-banner_right">-->
<!--						<ul>-->
<!--							<li>-->
<!--								<router-link :to="{path:'/donation_guide',query:{deAcBig:1}}">捐赠形式</router-link>-->
<!--								<img src="../assets/img/index/line.png" alt="">-->
<!--							</li>-->
<!--							<li>-->
<!--								<router-link :to="{path:'/donation_guide',query:{deAcBig:3}}">捐赠答疑</router-link>-->
<!--                <img src="../assets/img/index/line.png" alt="">-->
<!--							</li>-->
<!--              <li>-->
<!--                <router-link :to="{path:'/aboutus',query:{deAcBig:4}}">联系我们</router-link>-->
<!--              </li>-->
<!--						</ul>-->
<!--						<span class="todonate" style="cursor: pointer;" @click="toDonate">我要捐赠</span>-->
<!--						<div class="phonebox flex hc vc">-->
<!--							<img src="../assets/img/index/phone.png" alt="" class="phoneimg">-->
<!--							<p>0357-2051369</p>-->
<!--						</div>-->
<!--					</div>-->
				</div>
        <div class="mainbox flex hs vs">
          <transition :duration="{ enter: 500, leave: 800 }" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
            <div class="main1" v-show="animateShow_1">
              <router-link :to="{path:'/donation_thank',query:{deAcBig:1,deAcSml:3}}" class="maintitle flex hb vc">
                <div class="w-titleleft flex vc">
                  <div class="shu"></div>
                  <div class="w-title">捐赠故事</div>
                </div>
                <img src="../assets/img/index/toright.png" alt="" class="toright">
              </router-link>
              <div class="w-storybox" style="height: 330px;">
                <div class="swiper-container story_swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(v,i) in storyList" :key="i">
                      <div class="story_item">
                        <router-link :to="{path:'/donation_thank',query:{deAcBig:1,deAcSml:3,detailId:v.id}}" class="flex vc hs">
                          <div class="w-photo shrink0" :style="{backgroundImage:'url('+v.coverPicture+')'}"></div>
                          <div class="w-main1right flex hb vs column">
                            <p class="gushititle ellipsis2">{{ v.title }}</p>
                            <div class="flex vc author_box">
                              <p>———</p>
                              <p class="author">{{ v.author || '山西师范大学' }}</p>
                            </div>
                          </div>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>

          <transition :duration="{ enter: 700, leave: 800 }" enter-active-class="animated bounceIn" leave-active-class="animated bounceOutRight">
            <div class="main2" v-show="animateShow_2">
              <div class="newsbox">
                <router-link :to="{path:'/newsList'}" class="maintitle flex hb vc">
                  <div class="w-titleleft flex vc">
                    <div class="shu"></div>
                    <div class="w-title">新闻动态</div>
                  </div>
                  <img src="../assets/img/index/toright.png" alt="" class="toright">
                </router-link>
                <ul class="newsul">
                  <li v-for="(v,i) in newList" :key="i">
                    <router-link :to="{path:'/newsList',query:{deAcBig:1,detailId:v.id}}" class="flex hb vc">
                      <div class="w-pbox flex hs vc">
                        <img src="../assets/img/index/dian.png" alt="" class="dian shrink0">
<!--                        <span class="w-sign-top" v-else>置顶</span>-->

                        <p class="w-text ellipsis">{{ v.title }}</p>
                      </div>
                      <p class="w-createTime">{{ v.createTime.split(' ')[0] }}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
              <div class="newsbox">
                <router-link :to="{path:'/newsList',query:{deAcBig:2}}" class="maintitle flex hb vc">
                  <div class="w-titleleft flex vc">
                    <div class="shu"></div>
                    <div class="w-title">通知公告</div>
                  </div>
                  <img src="../assets/img/index/toright.png" alt="" class="toright">
                </router-link>
                <ul class="newsul">
                  <li v-for="(v,i) in ggList" :key="i">
                    <router-link :to="{path:'/newsList',query:{deAcBig:2,detailId:v.id}}" class="flex hb vc">
                      <div class="w-pbox flex hs vc">
                        <img src="../assets/img/index/dian.png" alt="" class="dian shrink0">
<!--                        <span class="w-sign-top" v-else>置顶</span>-->
                        <p class="w-text ellipsis">{{ v.title }}</p>
                      </div>
                      <p>{{ v.createTime.split(' ')[0] }}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </transition>

          <div class="main2">
            <transition :duration="{ enter: 900, leave: 800 }" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutRight">
              <div class="newsbox" v-show="animateShow_3">
                <router-link :to="{path:'/donation_projects'}" class="maintitle flex hb vc">
                  <div class="w-titleleft flex vc">
                    <div class="shu"></div>
                    <div class="w-title">捐赠项目</div>
                  </div>
                  <img src="../assets/img/index/toright.png" alt="" class="toright">
                </router-link>
                <ul class="donateul">
                  <li v-for="(v,i) in jzmxList" :key="i">
                    <router-link :to="{path:'/donation_projects',query:{deAcBig:i+1}}" >{{v.className}}</router-link>
                  </li>
                </ul>
              </div>
            </transition>

            <transition :duration="{ enter: 1100, leave: 800 }" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutRight">
              <div class="newsbox w-thankyou" v-show="animateShow_4">
                <router-link :to="{path:'/donation_thank'}" class="maintitle flex hb vc">
                  <div class="w-titleleft flex vc">
                    <div class="shu"></div>
                    <div class="w-title">捐赠鸣谢</div>
                  </div>
                  <img src="../assets/img/index/toright.png" alt="" class="toright">
                </router-link>
                <div class="newsul donor_swiper_box">
                  <div class="swiper-container donor_swiper" style="height: 140px;">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide" v-for="(v,i) in donateList" :key="i">
                        <div class="donor_item">
                          <router-link to="./donation_thank" class="flex hb vc">
                            <div class="w-pbox flex hs vc">
                              <img src="../assets/img/index/dian.png" alt="" class="dian shrink0">
                              <p class="w-text ellipsis">{{ v.name }}</p>
                            </div>
                            <p class="w-donate"><span v-if="v.donate">￥{{ formatMoney(v.donate) }}</span><span v-if="v.donate && v.goods"> / </span><span v-if="v.goods">{{ v.goods }}</span></p>
                          </router-link>
                        </div>
                      </div>
                    </div>
                  </div>
<!--                  <div class="swiper-container donor_swiper">-->
<!--                    <vue-seamless-scroll :data="donateList" class="seamless-warp" :class-option="classOption">-->
<!--                      <ul>-->
<!--                        <li class="swiper-slide" v-for="(v,i) in donateList" :key="i">-->
<!--                          <div class="donor_item">-->
<!--                            <router-link to="./donation_thank" class="flex hb vc">-->
<!--                              <div class="w-pbox flex hs vc">-->
<!--                                <img src="../assets/img/index/dian.png" alt="" class="dian shrink0">-->
<!--                                <p class="w-text ellipsis">{{ v.name }}</p>-->
<!--                              </div>-->
<!--                              <p class="w-donate"><span v-if="v.donate">￥{{ v.donate }}</span><span v-if="v.donate && v.goods"> / </span><span v-if="v.goods">{{ v.goods }}</span></p>-->
<!--                            </router-link>-->
<!--                          </div>-->
<!--                        </li>-->
<!--                      </ul>-->
<!--                    </vue-seamless-scroll>-->
<!--                  </div>-->
                </div>
              </div>
            </transition>
          </div>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Swiper from 'swiper'
  import vueSeamlessScroll from 'vue-seamless-scroll'
	import 'swiper/css/swiper.min.css'
	import 'swiper/js/swiper.min.js'
	import {
		projectClassList,
	} from '@/api/project'
  import {
    articleClassList
  } from '@/api/article'
  import {
    donateList
  } from '@/api/donate'
  import { formatMoney } from "../utils/formatMoney"

  export default {
    components: {
      vueSeamlessScroll
    },

    computed: {
      // classOption() {
      //   return {
      //     step: 0.2, // 数值越大速度滚动越快
      //     limitMoveNum: this.donateList.length, // 开始无缝滚动的数据量 this.dataList.length
      //     hoverStop: true, // 是否开启鼠标悬停stop
      //     direction: 1, // 0向下 1向上 2向左 3向右
      //     openWatch: true, // 开启数据实时监控刷新dom
      //     singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      //     singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      //     waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      //   }
      // }
    },

    data() {
			return {
				bannerList: [
				  require('../assets/img/index/banner_1.png'),
          require('../assets/img/index/banner_2.png'),
          require('../assets/img/index/banner_3.png'),
          require('../assets/img/index/banner_4.png')
        ],
				storyList: [],
				newList: [],
				ggList: [],
				jzmxList: [],
				donateList: [],
        isSearchList: false,
        isShowDonatedDialog: false,
        animateShow_1: false,
        animateShow_2: false,
        animateShow_3: false,
        animateShow_4: false,
        classOption: {}
			}
		},
    created(){
		  this.isSearch()
      articleClassList({classId: 17, size: 0}).then(response => {
        this.storyList = response.data.list
      })
      articleClassList({classId: 9, size: 0}).then(response => {
        this.newList = response.data.list.slice(0, 8)
        // this.newList.forEach(v => {
        //   v.createTime = v.createTime.substring(5, 7)+'/'+v.createTime.substring(8, 10)
        // })
      })
      articleClassList({classId: 18, size: 0}).then(response => {
        this.ggList = response.data.list.slice(0, 2)
        // this.ggList.forEach(v => {
        //   v.createTime = v.createTime.substring(5, 7)+'/'+v.createTime.substring(8, 10)
        // })
      })
      projectClassList().then(response => {
        this.jzmxList = response.data.slice(0, 3);
        // console.log(this.jzmxList)
      })
      donateList({ size: 0 }).then(response => {
        this.donateList = response.data.list

        console.log(this.donateList.length)
      })
    },
		mounted() {
      var swiper_banner = new Swiper('.banner_swiper', {
        autoplay: {
          delay: 3000,
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination.banner_swiper',
        },
      });

      // 动效
      let _this = this

      for (let i = 1; i < 5; i++) {
        (function () {
          setTimeout(() => {
            _this['animateShow_' + i] = true
          }, i * 150)
        })()
      }

      // 故事轮播
      setTimeout(() => {
        let swiper_story = new Swiper('.story_swiper', {
          direction: 'vertical',
          slidesPerView: 3,
          // spaceBetween: 10,
          loop: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          }
        })

        // this.classOption = {
        //   step: 0.2, // 数值越大速度滚动越快
        //   limitMoveNum: this.donateList.length, // 开始无缝滚动的数据量 this.dataList.length
        //   hoverStop: true, // 是否开启鼠标悬停stop
        //   direction: 1, // 0向下 1向上 2向左 3向右
        //   openWatch: true, // 开启数据实时监控刷新dom
        //   singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        //   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        //   waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        // }

        // 根据项目分类条数，判断捐赠列表要显示条数，以及整体高度
        let _slidesPerView = 5
        let dom_donor_box = document.getElementsByClassName('donor_swiper')[0]

        if (_this.jzmxList.length === 1) {
          _slidesPerView = 8
          dom_donor_box.style.height = '220px'
        } else if (_this.jzmxList.length === 2) {
          _slidesPerView = 6
          dom_donor_box.style.height = '180px'
        }

        // 捐赠轮播
        let swiper_donor = new Swiper('.donor_swiper', {
          direction: 'vertical',
          slidesPerView: _slidesPerView,
          spaceBetween: 5,
          loop: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          }
        })
      }, 4 * 150)
    },
		methods: {
      formatMoney(money) {
        return formatMoney(money)
      },

			isSearch(data){
				console.log(data)
				this.isSearchList=data
			},

      // 我要捐赠
      toDonate() {
        // 事件触发 显示捐赠模态框
        this.$eventBus.$emit('isShowCodeDialog', true, false)
      }
		}
	};
</script>
<style >
  /*.fade-enter-active, .fade-leave-active {*/
  /*  transition: opacity 3s;*/
  /*}*/
  /*.fade-enter, .fade-leave-to !* .fade-leave-active below version 2.1.8 *! {*/
  /*  opacity: 0;*/
  /*}*/
</style>

<style scoped>
  .w-sign-top {
    font-size: 12px;
    line-height: 25px;
    color: #ffffff;
    font-weight: 300;
    padding: 0 10px;
    background: #CFA972;
    border-radius: 3px;
    margin-right: 10px;
  }

  .w-donate {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #F5A623;
  }

  .author_box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
</style>

<style scoped>
	.w-width {
    min-width: 600PX;
		width: 70%;
		margin: 0 auto;
	}
	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
	/* banner */
	.bannerWrap .swiper-slide {
    height: 270PX;
	}

	.w-banner {
		width: 100%;
	}

	.w-banner .w-img {
		width: 100%;
		height: 270PX;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		display: block;
	}

	/* banner右侧 */
	.w-banner_right {
		width: 20%;
		background: #731A1A;
		height: 400px;
		padding: 19px 22px;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
	}

	.w-banner_right ul {
		padding: 10px 0;
	}

	.w-banner_right li a {
		color: #fff;
		font-size: 20px;
		padding: 25px 0;
		display: block;
	}

	.w-banner_right li img {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	.todonate {
		width: 100%;
		display: block;
		color: #fff;
		font-size: 20px;
    padding: 12px 0;
		background: #8D2F33;
		border-radius: 5px;
		border: 1PX solid #DD908E;
	}

	.phonebox {
		font-size: 20px;
		color: #fff;
		margin-top: 20px;
	}

	.phonebox img {
		width: 30px;
		display: block;
		margin-right: 9px;
	}

	/* 内容部分 */
	.mainbox {
		background: #fff;
		padding-left: 14px;
		padding-right: 20px;
		border-right: 1PX solid #eee;
		border-left: 1PX solid #eee;
		padding-bottom: 20px;
	}

	.mainbox>div {
		width: 38%;
		padding: 5px 10px;
	}

	.mainbox>div:nth-child(3) {
		width: 28%;
	}

	.mainbox>div ul {
		padding: 8px 0;
	}

	.maintitle {
		padding-top: 16px;
	}

	.shu {
		background: #692324;
		width: 4px;
		height: 18px;
		margin-right: 7px;
	}

	.toright {
		width: 16px;
	}

	.w-title {
		font-size: 19px;
		color: #434343;
	}

	/* 捐赠故事 */
  .w-storybox {
    height: 400px;
    margin-top: 5px;
  }

  .w-storybox .swiper-container {
    height: 100%;
  }

  .donor_swiper_box .donor_swiper {
    height: 180px;
  }

  .donor_swiper .seamless-warp {
    width: 100%;
    height: calc(100% - 16px);
    overflow: hidden;
  }

  /*.donor_swiper .swiper-slide {*/
  /*  height: 30px;*/
  /*}*/

	.w-photo {
		width: 130px;
		height: 108px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 14px;
	}

	.w-storybox .story_item {
		padding: 8px 0;
		box-sizing: border-box;
	}

	.w-main1right {
		height: 105px;
		font-size: 15px;
		color: rgba(83, 83, 83, 1);
		line-height: 1.4;
		width: calc(100% - 145px);
	}

	.gushititle {
		font-size: 16px;
		color: rgba(121, 28, 28, 1);
	}

	/* 新闻动态 */
	.dian {
		width: 5px;
		height: 5px;
		margin-right: 10px;
		display: block;
	}

	.newsul li a, .newsul .donor_item a {
		font-size: 13PX;
		color: #7D7D7D;
		padding: 5PX 0;
	}

	.newsul li a:hover, .newsul .donor_item a:hover {
		color: #954D4D;
	}

	.donateul a {
		margin: 0 auto;
		background: #7B3234;
		display: block;
		padding: 11px 0;
		text-align: center;
		width: 90%;
		border-radius: 5px;
		margin-top: 5px;
		color: #fff;
		font-size: 18px;
	}

	.donateul a:hover {
		background: #D2A972;
	}

	.w-pbox {
		width: 320px;
	}

	.w-text {
		width: 280px;
	}

  .w-createTime {
    white-space: nowrap;
  }

	.w-thankyou .w-pbox {
		width: 60%;
	}

  .w-thankyou .maintitle {
    padding-bottom: 10px;
  }
</style>
<style>
	.w-index .swiper-pagination {
		text-align: right;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.w-index .swiper-pagination-bullet {
		background: rgba(255, 255, 255, 1);
	}

	.w-index .swiper-pagination-bullet-active {
		background: #fff;
	}
</style>
